<template>
    <div>
        <div class="search-container">
            <el-input v-model="searchItem.name" placeholder="角色名称" clearable></el-input>
            <el-input v-model="searchItem.key" placeholder="角色标识" clearable></el-input>
            <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
        </div>
        <div class="operator-container">
            <el-button type="primary" @click="added">添加角色</el-button>
        </div>
        <div class="content-container">
            <div class="card-container" v-for="item in roleList" :key="item.id">
                <el-collapse v-model="activeName" accordion v-if="!item.isDisable" @change="initTreeData(item.id)">
                    <el-collapse-item :title="item.name" :name="item.id">
                        <el-card class="box-card" :key="item.id">
                            <div slot="header" class="clearfix">
                                <div style="display: flex;justify-content: space-between">
                                    <div><span><el-tag type="success" size="medium">{{
                                            item.name
                                        }} </el-tag> 权限设置</span></div>
                                    <div>
                                        <el-tooltip class="item" effect="dark" content="重置权限" placement="top">
                                            <el-button type="text" @click="onRefresh(item.id)">
                                                <i class="el-icon-refresh" style="color: #1a1d1b"></i>
                                            </el-button>
                                        </el-tooltip>
                                        <el-tooltip class="item" effect="dark" content="更新角色" placement="top">
                                            <el-button type="text" @click="onEdit(item)">
                                                <i class="el-icon-edit-outline" style="color: coral"></i>
                                            </el-button>
                                        </el-tooltip>
                                        <el-tooltip class="item" effect="dark" content="删除角色" placement="top">
                                            <el-button type="text" @click="onDel(item.id)">
                                                <i class="el-icon-delete" style="color: red"></i>
                                            </el-button>
                                        </el-tooltip>
                                    </div>
                                </div>
                            </div>
                            <el-tree
                                    :name="item.id"
                                    :data="treeMenuList"
                                    show-checkbox
                                    node-key="id"
                                    ref="tree"
                                    highlight-current
                                    :props="defaultProps"
                                    :key="item.id">
                            </el-tree>
                            <div style="display: flex;justify-content: right;margin-top: 5px">
                                <el-button type="primary" style="padding: 3px" @click="onSavePower(item.id)">保存
                                </el-button>
                            </div>
                        </el-card>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </div>
        <div class="operator-content">
            <el-drawer
                    :title="title"
                    :visible.sync="drawer"
                    direction="rtl"
                    @closed="onClose"
                    :before-close="handleClose">
                <el-row :gutter="10" justify="center">
                    <el-col :span="18">
                        <el-form :model="roleInfo" :rules="rules" ref="ruleForm" label-width="100px"
                                 class="demo-ruleForm">
                            <el-form-item label="角色名称" prop="name">
                                <el-input v-model="roleInfo.name"></el-input>
                            </el-form-item>
                            <el-form-item label="角色标识" prop="key">
                                <el-input v-model="roleInfo.key"></el-input>
                            </el-form-item>
                            <el-form-item label="排序字段" prop="orderNum">
                                <el-input-number v-model="roleInfo.orderNum" :min="0" :max="999"></el-input-number>
                            </el-form-item>
                            <el-form-item label="是否启用" prop="isDisable">
                                <el-switch
                                        v-model="roleInfo.isDisable"
                                        active-color="#ff4949"
                                        inactive-color="#13ce66">
                                </el-switch>
                            </el-form-item>
                            <el-form-item label="备注说明" prop="remark">
                                <el-input type="textarea" v-model="roleInfo.remark"></el-input>
                            </el-form-item>
                            <el-form-item style="text-align: center">
                                <el-button type="primary" @click="submitForm('ruleForm')" icon="el-icon-check">确认
                                </el-button>
                                <el-button @click="resetForm('ruleForm')" type="warning" icon="el-icon-refresh"
                                           v-show="operatorType==1">重置
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </el-drawer>
        </div>
    </div>
</template>

<script>
import {added, addedPower, deleted, edited, getAll, getKeys} from "@/api/roles";
import {getTier} from "@/api/menus";

export default {
    name: "roles",
    data() {
        return {
            roleList: [],
            roleInfo: {
                name: "",
                key: "",
                orderNum: 0,
                isDisable: false,
                isDel: false,
                remark: ""
            },
            rules: {
                name: [{required: true, message: '请输入角色名称', trigger: 'blur'}],
                key: [{required: true, message: '请输入角色标识', trigger: 'blur'},]
            },
            treeMenuList: [],
            defaultProps: {
                children: 'children',
                label: 'menuName'
            },
            searchItem: {
                name: "",
                key: ""
            },
            operatorType: 1, //1表示新增 2表示更新
            drawer: false,
            title: "添加角色",
            activeName: -1,
        }
    },
    mounted() {
        this.initRoleList();
        this.initTreeMenuList();
    },
    methods: {
        initRoleList() {
            getAll(this.searchItem).then(res => {
                this.roleList = res.data;
            })
        },
        initTreeMenuList() {
            getTier().then(res => {
                this.treeMenuList = res.data;
            })
        },
        initTreeData(id) {
            getKeys(id).then(res => {
                this.$refs.tree.find(x => x.$attrs.name == id).setCheckedKeys(res.data);
            })
        },

        onSearch() {
            this.initRoleList();
        },

        onDel(id) {
            this.$confirm("您确定要删除当前角色吗?", "提示信息", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                deleted(id).then(res => {
                    if (res) {
                        this.$message.success(res.message);
                        this.initRoleList();
                        this.drawer = false;
                        this.reset();
                    }
                })
            }).catch(() => {
                this.$message.info("取消删除操作");
            })
        },
        onEdit(role) {
            Object.assign(this.roleInfo, role);
            this.title = "更新角色";
            this.operatorType = 2;
            this.drawer = true;
        },
        onRefresh(id) {
            this.initTreeData(id);
            this.$message.success("重置权限成功!")
        },
        onSavePower(id) {
            let keys = this.$refs.tree.find(x => x.$attrs.name == id).getCheckedKeys([]);
            addedPower(id, keys.join(",")).then(res => {
                if (res) {
                    this.$message.success(res.message);
                    this.activeName = -1;
                }
            })
        },

        added() {
            this.drawer = true;
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.operatorType == 1) {
                        added(this.roleInfo).then(res => {
                            if (res) {
                                this.$message.success(res.message);
                                this.initRoleList();
                                this.drawer = false;
                                this.reset();
                            }
                        });
                    } else {
                        edited(this.roleInfo).then(res => {
                            if (res) {
                                this.$message.success(res.message);
                                this.initRoleList();
                                this.drawer = false;
                                this.reset();
                            }
                        })
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm() {
            this.reset();
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {
                });
        },
        onClose() {
            this.reset();
        },
        //重置数据
        reset() {
            this.roleInfo = {
                name: "",
                key: "",
                orderNum: 0,
                isDisable: false,
                isDel: false,
                remark: ""
            };
            this.operatorType = 1;
            this.title = "添加角色";
        }
    },
}
</script>

<style scoped>
.search-container {
    width: 50rem;
    display: flex;
    justify-content: right;
    margin-bottom: 8px;
}

.search-container .el-input {
    width: 200px;
    margin-right: 5px;
}

.operator-container {
    margin-bottom: 8px;
}

.content-container {
    width: 50rem;
}

.card-container >>> i {
    font-size: 16px;
}

</style>